import React, { Fragment, memo } from "react";

import { footerLinks } from "@/common/local-data";

import { FooterLeft, FooterRight, FooterWrapper } from "./style";
import { footerImages } from "../../common/local-data";

export default memo(function YYAppFooter() {
  return (
    <FooterWrapper>
      <div className="wrap-v2 content">
        <FooterLeft>
          <div>
            {footerLinks.map((item, index) => {
              return (
                <Fragment key={item.title}>
                  <a href={item.path} className="footer-link">
                    {item.title}
                  </a>
                  <span className="line">|</span>
                </Fragment>
              );
            })}
          </div>
        </FooterLeft>
        <FooterRight>
          {footerImages.map((item, index) => {
            return (
              <li className="unit" key={item.title}>
                <a href={item.path} className={`logo logo-${item.title}`}>
                  a
                </a>
                <span className={`tt tt-${item.title}`}></span>
              </li>
            );
          })}
        </FooterRight>
      </div>
    </FooterWrapper>
  );
});
